<template>
  <div>
    <!-- 会员套餐 -->
    <div v-show="show" class="div-home">
      <div class="check-form-box">
        <el-form
          :inline="true"
          :model="searchModel.data"
          class="demo-form-inline"
        >
          <el-form-item label="系列名称">
            <el-input
              v-model.trim="searchModel.seriesName"
              placeholder="请选择系列名称"
            />
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="searchModel.state" placeholder="请选择状态">
              <el-option label="全部" :value="null" />
              <el-option label="启用" value="1" />
              <el-option label="禁用" value="0" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" color="#ea5b24" @click="searchVip()"
              >查询</el-button
            >
            <el-button
              type="primary"
              color="#ea5b24"
              @click="showDialog(null, 0)"
              v-if="pinia.isShow[52]"
              >添加</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <el-table :data="tableData.data" style="width: 100%">
        <el-table-column prop="id" label="套餐ID" />
        <el-table-column prop="seriesName" width="100" label="套餐系列" />
        <el-table-column prop="carType" label="客货类型">
          <template #default="scope">
            {{
              scope.row.carType == null
                ? ""
                : scope.row.carType == 0
                ? "货车"
                : "客车"
            }}
          </template>
        </el-table-column>
        <el-table-column prop="name" width="120" label="套餐名称" />
        <el-table-column prop="vipPrice" label="华行通会员" />
        <!-- <el-table-column prop="costType" label="搭配会员套餐">
          <template #default="scope">
            {{ scope.row.costType == null ? '' : scope.row.costType == 0 ? '按月扣费' : '按年扣费' }}
          </template>
        </el-table-column>
        <el-table-column prop="svipPrice" label="华行通超级会员" /> -->
        <!-- <el-table-column :formatter="calcTotalPrice" label="总价" /> -->
        <el-table-column
          prop="richText"
          width="180"
          label="ETC套餐富文本"
          :show-overflow-tooltip="true"
        />
        <!-- <el-table-column prop="payQrCodeUrl" width="200" label="支付二维码" /> -->
        <el-table-column
          prop="payRedirectUrl"
          width="260"
          label="支付后跳转链接"
          :show-overflow-tooltip="true"
        />
        <!-- <el-table-column
          prop="payType"
          :formatter="judgePayType"
          label="支付类型"
        /> -->
        <el-table-column prop="payeeType" label="收款方">
          <template #default="scope">
            {{
              scope.row.payeeType == null
                ? ""
                : scope.row.payeeType == 1
                ? "我方"
                : "第三方"
            }}
          </template>
        </el-table-column>
        <el-table-column prop="performanceType" label="业绩类型">
          <template #default="scope">
            {{
              scope.row.performanceType == null
                ? ""
                : scope.row.performanceType == 1
                ? "仅支付成功"
                : "支付成功且已激活"
            }}
          </template>
        </el-table-column>
        <el-table-column prop="jumpType" label="跳转类型" v-if="false">
          <template #default="scope">
            {{
              scope.row.jumpType == null
                ? ""
                : scope.row.jumpType == 1
                ? "微信"
                : "支付宝"
            }}
          </template>
        </el-table-column>
        <el-table-column
          prop="scenarioNames"
          label="关联场景"
          width="180"
          :show-overflow-tooltip="true"
        />
        <!-- <el-table-column
          prop="bindBankType"
          :formatter="judgeBindBankType"
          label="绑卡类型"
        /> -->
        <!-- <el-table-column prop="activateType" label="是否强制激活">
          <template #default="scope">
            {{ scope.row.activateType == null ? '' : scope.row.activateType == 1 ? '是' : '否' }}
          </template>
        </el-table-column> -->
        <el-table-column
          prop="sourceType"
          :formatter="judgeSourceType"
          label="发行渠道"
        />
        <!-- <el-table-column
          prop="thirdPay"
          :formatter="judgeThirdPay"
          width="180"
          label="第三方支付"
        /> -->
        <el-table-column
          prop="openType"
          width="140"
          label="展业员生成二维码打开小程序类型"
        >
          <template #default="scope">
            {{
              scope.row.openType == null
                ? ""
                : scope.row.openType == 1
                ? "华行通小程序"
                : "阔悦行小程序"
            }}
          </template>
        </el-table-column>
        <!-- <el-table-column
          prop="redundanJson"
          width="160"
          label="支付宝跳转参数"
        /> -->
        <el-table-column :formatter="judgeState" label="状态" />
        <el-table-column fixed="right" label="操作" width="100">
          <template v-slot:default="scope">
            <div class="div-cell">
              <el-button
                link
                type="primary"
                size="small"
                @click="showDialog(scope.row, 1)"
                v-if="pinia.isShow[54]"
                >编辑</el-button
              >
              <el-button
                link
                type="primary"
                size="small"
                @click="disableVip(scope.row.id, scope.row.state)"
                v-if="pinia.isShow[55]"
                >{{ scope.row.state == 1 ? "禁用" : "启用" }}</el-button
              >
              <el-button
                link
                type="primary"
                size="small"
                @click="awardConfig(scope.row)"
                v-if="pinia.isShow[53]"
              >
                设置奖励金
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页插件 -->
      <div style="text-align: center">
        <el-pagination
          :total="totalNum"
          @current-change="handleCurrentChange"
          background
          :page-size="size"
          layout="prev, pager, next, total"
          :current-page="page"
        />
      </div>

      <!-- 添加/编辑对话框 -->
      <el-dialog
        v-model="dialogVisible"
        :title="dialogTitle"
        center="true"
        modal="true"
        width="1100px"
      >
        <el-form
          :model="model"
          class="el-form-dialog"
          :rules="rules"
          ref="ruleFormRef"
        >
          <div class="div-dialog">
            <el-form-item label="id" v-if="false" :label-width="formLabelWidth">
              <el-input v-model="model.id" autocomplete="off" />
            </el-form-item>
            <el-form-item
              label="客货类型："
              :label-width="formLabelWidth"
              prop="carType"
            >
              <el-radio-group v-model="model.carType">
                <el-radio :label="1">客车</el-radio>
                <el-radio :label="0">货车</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item
              label="套餐名称："
              :label-width="formLabelWidth"
              prop="name"
            >
              <el-input v-model.trim="model.name" autocomplete="off" />
            </el-form-item>
            <el-form-item
              label="套餐系列："
              :label-width="formLabelWidth"
              prop="seriesId"
            >
              <el-select v-model="model.seriesId" placeholder="请选择系列">
                <el-option
                  v-for="item in seriesArr.data"
                  :value="item['value']"
                  :label="item['label']"
                  :key="item['value']"
                />
              </el-select>
            </el-form-item>
            <el-form-item
              label="ETC套餐售价:"
              prop="price"
              :label-width="formLabelWidth"
            >
              <el-input-number
                :precision="2"
                v-model="model.price"
                :controls="false"
                :min="0"
              />
            </el-form-item>
            <el-form-item label="富文本描述:" :label-width="formLabelWidth">
              <el-input
                type="textarea"
                :autosize="{ minRows: 3, maxRows: 6 }"
                v-model="model.richText"
                autocomplete="off"
              />
            </el-form-item>
            <el-form-item
              label="支付后跳转链接:"
              :label-width="formLabelWidth"
              prop="payRedirectUrl"
            >
              <el-input
                type="textarea"
                :autosize="{ minRows: 3, maxRows: 6 }"
                v-model.trim="model.payRedirectUrl"
                autocomplete="off"
              />
            </el-form-item>
            <!-- <el-form-item label="支付二维码:" :label-width="formLabelWidth">
              <el-input
                type="textarea"
                autosize
                v-model.trim="model.payQrCodeUrl"
                autocomplete="off"
              />
            </el-form-item> -->
            <el-form-item
              label="收款方:"
              :label-width="formLabelWidth"
              prop="payeeType"
            >
              <el-radio-group v-model="model.payeeType">
                <el-radio :label="1">我方</el-radio>
                <el-radio :label="2">第三方</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item
              label="业绩类型:"
              :label-width="formLabelWidth"
              prop="performanceType"
            >
              <el-radio-group v-model="model.performanceType">
                <el-radio :label="1">仅支付成功</el-radio>
                <el-radio :label="2">支付成功且已激活</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <div class="div-dialog">
            <el-form-item
              label="跳转类型："
              :label-width="formLabelWidth"
              prop="jumpType"
            >
              <el-radio-group v-model="model.jumpType">
                <el-radio :label="1">微信</el-radio>
                <el-radio :label="2">支付宝</el-radio>
                <el-radio :label="3">内部跳转</el-radio>
              </el-radio-group>
            </el-form-item>
            <!-- <el-form-item label="支付类型：" :label-width="formLabelWidth">
              <el-radio-group v-model="model.payType">
                <el-radio :label="1">易宝</el-radio>
                <el-radio :label="2">富友</el-radio>
                <el-radio :label="3">微信-金瑜</el-radio>
                <el-radio :label="4">银联</el-radio>
                <el-radio :label="5">新生</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="绑卡类型:" :label-width="formLabelWidth">
              <el-radio-group v-model="model.bindBankType">
                <el-radio :label="1">易宝</el-radio>
                <el-radio :label="2">富友</el-radio>
                <el-radio :label="3">银联</el-radio>
                <el-radio :label="4">新生</el-radio>
              </el-radio-group>
            </el-form-item> -->
            <el-form-item
              label="关联场景："
              :label-width="formLabelWidth"
              prop="scenarioIdArr"
            >
              <el-select
                v-model="model.scenarioIdArr"
                multiple
                placeholder="请选择关联场景"
                class="select-roles"
              >
                <el-option
                  v-for="item in scenario.data"
                  :value="item['value']"
                  :label="item['label']"
                  :key="item['value']"
                />
              </el-select>
            </el-form-item>
            <el-form-item
              label="发行渠道:"
              :label-width="formLabelWidth"
              prop="sourceType"
            >
              <el-radio-group v-model="model.sourceType">
                <el-radio
                  v-for="item in pinia.allDic?.vip_pack_source?.dicList"
                  :key="item.dicId"
                  :label="item.dicValue"
                  >{{ item.dicName }}</el-radio
                >
              </el-radio-group>
            </el-form-item>
            <el-form-item
              label="AppID:"
              :label-width="formLabelWidth"
              prop="appId"
            >
              <el-input v-model.trim="model.appId" autocomplete="off" />
            </el-form-item>
            <!-- <el-form-item label="第三方支付:" :label-width="formLabelWidth">
              <el-checkbox-group v-model="escrowShow">
                <el-checkbox :label="1">{{ "微信支付" }}</el-checkbox>
                <el-checkbox :label="2">{{ "支付宝支付" }}</el-checkbox>
                <el-checkbox :label="3" disabled>{{
                  "云闪付支付"
                }}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item
              label="微信支付渠道:"
              v-if="escrowShow.includes(1)"
              :label-width="formLabelWidth"
            >
              <el-radio-group v-model="escrow.微信">
                <el-radio label="直连" disabled>直连</el-radio>
                <el-radio label="富友">富友</el-radio>
                <el-radio label="银联">银联</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item
              label="支付宝支付渠道:"
              v-if="escrowShow.includes(2)"
              :label-width="formLabelWidth"
            >
              <el-radio-group v-model="escrow.支付宝">
                <el-radio label="直连" disabled>直连</el-radio>
                <el-radio label="富友">富友</el-radio>
                <el-radio label="银联">银联</el-radio>
              </el-radio-group>
            </el-form-item> -->

            <el-form-item
              label="展业员生成二维码打开小程序类型:"
              prop="openType"
            >
              <el-select
                v-model="model.openType"
                placeholder="请选择"
                style="width: 140px"
              >
                <el-option label="华行通小程序" :value="1" />
                <el-option label="阔悦行小程序" :value="2" />
              </el-select>
            </el-form-item>
            <el-form-item label="支付宝跳转参数:" :label-width="formLabelWidth">
              <el-input
                type="textarea"
                :autosize="{ minRows: 3, maxRows: 6 }"
                v-model.trim="model.redundanJson"
                autocomplete="off"
              />
            </el-form-item>
          </div>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="formSubmit()" color="#ea5b24"
              >保存</el-button
            >
          </span>
        </template>
      </el-dialog>
    </div>
    <!-- 设置奖励金界面 -->
    <div v-show="!show">
      <detaild
        :awardModel="awardModel"
        ref="bountySubmit"
        @packConfigBack="back"
      ></detaild>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import detaild from "./detaild.vue";
import {
  addVipApi,
  batchEnableVipApi,
  editVipApi,
  findVipApi,
  listVipSeriesApi,
  findPaySceneListApi,
} from "../../../api/index";
import { ElMessage, FormInstance, FormRules } from "element-plus";
import { usePermissStore } from "../../../store/permiss";
const pinia = usePermissStore();

// 分页数据
let tableData: any = reactive([]);
const totalNum = ref(0);
const page = ref(1);
const size = 8;

// 翻页
let flipData = reactive({
  page: page,
  size: size,
});
const handleCurrentChange = (val: number) => {
  page.value = val;
  flipData.page = page.value;
  find(flipData);
};

// 搜索模型
const searchModel: any = reactive({
  seriesName: null,
  state: null,
  page: page,
  size: size,
});

// 设置奖励金组件是否显示
const show = ref(true);
const formLabelWidth = "140px";
// 添加/编辑对话框标题
const dialogTitle = ref("");
// 添加/编辑对话框类型 0：添加代理 1：编辑代理
const dialogType = ref(0);
// 控制编辑表单显示标识
const dialogVisible = ref(false);

//表单校验
const ruleFormRef = ref<FormInstance>();
const rules = reactive<FormRules>({
  carType: [{ required: true, message: "请选择客货类型", trigger: "blur" }],
  name: [{ required: true, message: "请输入套餐名称", trigger: "blur" }],
  seriesId: [{ required: true, message: "请选择套餐系列", trigger: "blur" }],
  payRedirectUrl: [
    { required: true, message: "请输入支付后跳转链接", trigger: "blur" },
  ],
  price: [{ required: true, message: "请输入ETC套餐售价", trigger: "blur" }],

  payeeType: [{ required: true, message: "请选择收款方", trigger: "blur" }],
  performanceType: [
    { required: true, message: "请选择业绩类型", trigger: "blur" },
  ],
  jumpType: [{ required: true, message: "请选择跳转类型", trigger: "blur" }],
  scenarioIdArr: [
    { required: true, message: "请选择关联场景", trigger: "blur" },
  ],
  sourceType: [{ required: true, message: "请选择发行渠道", trigger: "blur" }],
  appId: [{ required: true, message: "请输入AppID", trigger: "blur" }],
  openType: [
    {
      required: true,
      message: "请选择",
      trigger: "blur",
    },
  ],
});

// let escrowShow = ref([]);
// let escrow = reactive({
//   微信: null,
//   支付宝: null,
//   云闪付: null,
// });

// 支付类型
// const judgePayType = (row) => {
//   switch (row.payType) {
//     case 1:
//       return "易宝";
//     case 2:
//       return "富友";
//     case 3:
//       return "微信-金瑜";
//     case 4:
//       return "银联";
//     case 5:
//       return "新生";
//     default:
//       return "";
//   }
// };

// 发行渠道
const judgeSourceType = (row) => {
  let str = "";
  pinia.allDic?.vip_pack_source?.dicList.forEach((item) => {
    if (item.dicValue == row.sourceType) {
      str = item.dicName;
      return;
    }
  });
  return str;
  // switch (row.sourceType) {
  //   case 1:
  //     return "中视";
  //   case 2:
  //     return "金瑜";
  //   case 3:
  //     return "蜜蜂";
  //   default:
  //     return "";
  // }
};

// 绑卡类型
// const judgeBindBankType = (row) => {
//   switch (row.bindBankType) {
//     case 1:
//       return "易宝";
//     case 2:
//       return "富友";
//     case 3:
//       return "银联";
//     case 4:
//       return "新生";
//     default:
//       return "";
//   }
// };

// const judgeThirdPay = (row) => {
//   let str = "";
//   if (JSON.parse(row.thirdPay)) {
//     const objPay = JSON.parse(row.thirdPay);
//     if (objPay.微信) str += "微信支付:" + objPay.微信 + "\n";
//     if (objPay.支付宝) str += "支付宝支付:" + objPay.支付宝 + "\n";
//     if (objPay.云闪付) str += "云闪付支付";
//   }
//   return str;
// };
// 套餐模型
const model = reactive({
  id: null,
  carType: null,
  name: null,
  price: null,
  richText: null,
  seriesId: null,
  seriesName: null,
  // svipId: null,
  // svipPrice: null,
  jumpType: null,
  // payType: null,
  costType: null,
  // payQrCodeUrl: null,
  payRedirectUrl: null,
  payeeType: null,
  performanceType: null,
  // bindBankType: null,
  scenarioIdArr: null,
  scenarioIds: null,
  activateType: null,
  sourceType: null,
  appId: null,
  // thirdPay: null,
  openType: null,
  redundanJson: null,
});

// 设置奖励金模型
const awardModel = reactive({
  vipId: null,
  carType: null,
  name: null,
  seriesName: null,
  price: null,
});

// //会员套餐售价
// let sVipMoeny = ref()
// const svipIdChange = (val) => {
//   let index = sVipArr.data.findIndex((item: any) => item.value == val);
//   sVipMoeny.value = sVipArr.data[index].money;
// }

// 编辑对话框
const showDialog = (row, type: number) => {
  dialogVisible.value = true;
  dialogType.value = type;
  findAllScenario({
    pageNum: 1,
    pageSize: 5000,
  });
  // escrowShow.value = [];
  // escrow.微信 = null;
  // escrow.支付宝 = null;
  // escrow.云闪付 = null;
  Object.keys(model).forEach((key) => (model[key] = null));
  ruleFormRef.value ? ruleFormRef.value.clearValidate() : false;
  findSeries();
  if (type === 0) {
    dialogTitle.value = "添加套餐";
  } else {
    dialogTitle.value = "编辑套餐";
    model.id = row.id;
    model.carType = parseInt(row.carType);
    model.name = row.name;
    model.seriesName = row.seriesName;
    model.seriesId = row.seriesId;
    model.richText = row.richText;
    model.price = row.vipPrice;
    model.costType = row.costType;
    // model.payType = row.payType;
    // model.payQrCodeUrl = row.payQrCodeUrl;
    model.payRedirectUrl = row.payRedirectUrl;
    model.payeeType = row.payeeType;
    model.performanceType = row.performanceType;
    model.jumpType = row.jumpType;
    // model.bindBankType = row.bindBankType;
    model.activateType = row.activateType;
    model.sourceType = row.sourceType;
    model.appId = row.appId;
    model.openType = row.openType;
    model.redundanJson = row.redundanJson;

    model.scenarioIdArr = [];
    if (row.scenarioIds) {
      row.scenarioIds.split(",").forEach((val) => {
        model.scenarioIdArr.push(parseInt(val));
      });
    }

    // if (JSON.parse(row.thirdPay)) {
    //   const objThirdPay = JSON.parse(row.thirdPay);
    //   escrow.微信 = objThirdPay.微信;
    //   escrow.支付宝 = objThirdPay.支付宝;
    //   escrow.云闪付 = objThirdPay.云闪付;
    //   if (escrow.微信 != null) escrowShow.value.push(1);
    //   if (escrow.支付宝 != null) escrowShow.value.push(2);
    //   if (escrow.云闪付) escrowShow.value.push(3);
    // }
  }
};

// 添加提交
const formSubmit = pinia.debounce(() => {
  if (!ruleFormRef.value) return;
  ruleFormRef.value.validate((valid) => {
    if (valid) {
      // if (
      //   escrow.微信 == null &&
      //   escrow.支付宝 == null &&
      //   escrow.云闪付 == false
      // ) {
      //   model.thirdPay = null;
      // } else {
      //   escrowShow.value.includes(1) ? true : (escrow.微信 = null);
      //   escrowShow.value.includes(2) ? true : (escrow.支付宝 = null);
      //   escrowShow.value.includes(3)
      //     ? (escrow.云闪付 = true)
      //     : (escrow.云闪付 = false);
      //   model.thirdPay = JSON.stringify(escrow);
      // }
      model.scenarioIds = model.scenarioIdArr.join(",");
      if (dialogType.value === 0) {
        addVipApi(model).then((res) => {
          if (res.data.code === 2000) {
            find(searchModel);
            ElMessage({
              message: "添加成功.",
              type: "success",
            });
            dialogVisible.value = false;
          } else {
            ElMessage.error("添加失败");
          }
        });
      } else {
        editVipApi(model).then((res) => {
          if (res.data.code === 2000) {
            find(searchModel);
            ElMessage({
              message: "修改成功.",
              type: "success",
            });
            dialogVisible.value = false;
          } else {
            ElMessage.error("修改失败");
          }
        });
      }
    } else {
      return false;
    }
  });
});

// 禁用vip套餐
const disableVip = (id, oldState) => {
  batchEnableVipApi({
    state: oldState == 0 ? "1" : "0",
    ids: [id],
  }).then((res) => {
    if (res.data.code === 2000) {
      find(searchModel);
      ElMessage({
        message: "成功.",
        type: "success",
      });
    } else {
      ElMessage.error("失败");
    }
  });
};

// 搜索提现订单
const searchVip = () => {
  page.value = 1;
  searchParmSearch();
  find(searchModel);
  flipData = JSON.parse(JSON.stringify(searchModel));
};

// 搜索参数检查
const searchParmSearch = () => {
  Object.keys(searchModel).forEach((key) => {
    if (!searchModel[key]) {
      searchModel[key] = null;
    }
  });
};

// 查询vip套餐列表
const find = (searchModel) => {
  findVipApi(searchModel).then((res) => {
    if (res.data.code === 2000) {
      tableData.data = res.data.data.items;
      totalNum.value = res.data.data.total;
    } else {
      ElMessage.error("查询失败");
    }
  });
};

// 查询vip套餐系列
let seriesArr: any = reactive([]);
const findSeries = () => {
  listVipSeriesApi({
    page: 1,
    size: 200,
  }).then((res) => {
    if (res.data.code === 2000) {
      let dataList = res.data.data.data;
      seriesArr.data = Array.from(dataList).map((item, idx) => ({
        value: item["id"],
        label: item["name"],
      }));
    } else {
      ElMessage.error("查询系列失败");
    }
  });
};

// 查询所有的关联场景
let scenario: any = reactive([]);
const findAllScenario = (param) => {
  findPaySceneListApi(param).then((res) => {
    if (res.data.code === 2000) {
      let dataList = res.data.data.items;
      scenario.data = Array.from(dataList).map((item, idx) => ({
        value: item["id"],
        label: item["title"],
      }));
    } else {
      ElMessage.error("查询关联场景失败");
    }
  });
};

// 判断状态
const judgeState = (row, col) => {
  if (row.state == 1) {
    return "启用";
  } else {
    return "禁用";
  }
};

// // 计算总价
// const calcTotalPrice = (row, col) => {
//   return row.vipPrice + row.svipPrice;
// };

//子组件实例
const bountySubmit = ref(null);
// 设置奖励金
const awardConfig = (row) => {
  awardModel.vipId = row.id;
  awardModel.carType = row.carType;
  awardModel.name = row.name;
  awardModel.seriesName = row.seriesName;
  awardModel.price = row.vipPrice;

  bountySubmit.value.findBountySubmit();
  show.value = false;
};

// 返回会员套餐
const back = () => {
  show.value = !show.value;
};
onMounted(() => {
  find(searchModel);
});
</script>

<style scoped>
.el-form-dialog {
  display: grid;
  justify-items: center;
  grid-template-columns: repeat(auto-fill, 50%);
}

.div-dialog {
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

:deep(.el-textarea__inner) {
  width: 150%;
}

:deep(.el-input__wrapper) {
  width: 250px;
}

:deep(.el-table .cell) {
  white-space: pre-wrap;
}

/* /deep/.el-form-item__content {
  justify-content: flex-start
} */
</style>
